<template>
  <div class="app-container">
    <!-- <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" /> -->
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick">
      <template #status="scope">
        <el-tag :type="statusList[scope.row[scope.prop]].type">
          {{ $t(statusList[scope.row[scope.prop]].text) }}
        </el-tag>
      </template>
    </PageContent>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick"></page-modal>

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick"></page-modal>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import { tableHeightAutoAdjust } from '@/utils/common'
import usePage from "@/hooks/usePage";
defineOptions({
  name: "thirdGamesCategories",
  inheritAttrs: false,
});
const gridOptions = reactive({})
const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const statusList = {
  2: { text: "status.27", type: "success" },
  1: { text: "status.27", type: "success" },
  0: { text: "status.28", type: "danger" },
}
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}
onMounted(() => {
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
});
</script>